<template>
  <div class="number-box">
    <div>{{ countdown.hours }}</div>
    <span>:</span>
    <div>{{ countdown.minutes }}</div>
    <span>:</span>
    <div>{{ countdown.seconds }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";

const props = defineProps(["delistTime"]);
const countdown = ref({
  hours: "00",
  minutes: "00",
  seconds: "00"
});
let t;
const getCountdown = tempTime => {
  const hours = Math.floor(tempTime / 3600);
  const minutes = Math.floor((tempTime % 3600) / 60);
  const seconds = Math.floor(tempTime % 60);
  countdown.value = {
    hours: hours > 9 ? hours : "0" + hours,
    minutes: minutes > 9 ? minutes : "0" + minutes,
    seconds: seconds > 9 ? seconds : "0" + seconds
  };
};
onMounted(() => {
  const time = props.delistTime;
  const nowTime = new Date().getTime();
  const futureDate = new Date(time).getTime();
  const diff = futureDate - nowTime; // 时间差
  const day = Math.floor(diff / 1000 / 60 / 60 / 24);
  const integer = day * 24 * 60 * 60 * 1000;
  let tempTime = diff > 0 ? (diff - integer) / 1000 : 0;
  if (tempTime > 0) {
    t = setInterval(() => {
      tempTime -= 1;
      getCountdown(tempTime);
      if (tempTime <= 1) {
        clearInterval(t);
      }
    }, 1000);
  }
});
onUnmounted(() => {
  clearInterval(t);
});
</script>

<style lang="scss" scoped>
.number-box {
  display: flex;

  > div {
    background: white;
    height: 18px;
    width: 18px;
    color: #3d3d3d;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
  }

  > span {
    width: 10px;
    text-align: center;
  }
}
</style>
